<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
				条件渲染：
							1.v-if
										写法：
												(1).v-if="表达式" 
												(2).v-else-if="表达式"
												(3).v-else="表达式"
										适用于：切换频率较低的场景。
										特点：不展示的DOM元素直接被移除。
										注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

							2.v-show
										写法：v-show="表达式"
										适用于：切换频率较高的场景。
										特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
								
							3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

题目：有一个软件公司，1/2的人是系统分析员，2/5的人是软件工程师，有1/4的人两者都是，问有多少人两者都不是？
假设该公司的人数为x 系统分析员为1/2*x 软件工程师人数为2/5*x 两者都是的人数为1/4*x  两者都不是的为y
1/2*x+2/5*x-1/4*x+y = x
解得：y=7/20*x
如果该公司有 20 人，那么两者都不是的话就是7人了。
1 - 1/2 - 2/5 + 1/4= 0.35

		 -->
    <!-- 准备好一个容器-->
    <div id="root">
      <h2>当前的n值是:{{n}}</h2>
      <button @click="n++">点我n+1</button>
      <!-- 使用v-show做条件渲染 -->
      <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
      <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

      <!-- 使用v-if做条件渲染 -->
      <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
      <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

      <!-- v-else和v-else-if -->
      <!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

      <!-- v-if与template的配合使用 -->
      <template v-if="n === 1">
        <h2>你好</h2>
        <h2>尚硅谷</h2> 
        <h2>北京</h2>
      </template>
    </div>
  </body>

  <script type="text/javascript">
    // Vue.config.productionTip = false

    // const vm = new Vue({
    //   el: '#root',
    //   data: {
    //     name: '尚硅谷',
    //     n: 0,
    //   },
    // })
    var array1 = [0, 1, 2, 3, 4, 5]
    var newArray = array1.map((a) => 's' + a)
    console.log(newArray)
    /////////////////////////////////////////
    var array01 = [
      { id: 0, je: 2.6 },
      { id: 1, je: 3 },
      { id: 2, je: 4 },
    ]
    var total = array01.reduce((t, l) => t + l.je, 0)
    console.log(total)
    //////////////////////////////////////////
    var array1 = [
      { id: 0, name: 'n0' },
      { id: 1, name: 'n1' },
      { id: 2, name: 'n2' },
    ]
    var arr = []
    for (var i in array1) {
      arr.push({
        name: array1[i].name,
      })
    }
    console.log(arr)

    // 实现方法
    // @param name { String } 需要返回的属性名
    // @param arr { Array } 原始数据
    // @return ret { Array } 返回值
    // function getParamValues(name, array1) {
    //   var ret = []
    //   for (var i = 0, len = arr.length; i < len; i++) {
    //     ret.push(array1[i][name])
    //   }
    //   return ret
    // }

    // var ret = getParamValues('name', array1)
    // console.log(ret)
  </script>
</html>
